<!DOCTYPE html>
<html lang="zh-cn"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="common::head"></head>
<body>
<div th:replace="common::top"></div>
<br/>
<h2>订单详情</h2>
<table>
    <tr>
        <td><b>客户:</b></td>
        <td th:text="${order.customName}" colspan="5"></td>
    </tr>
    <tr>
        <td><b>编码:</b></td>
        <td th:text="${order.code}"></td>
        <td><b>ID:</b></td>
        <td th:text="${order.id}"></td>
        <td><b>订单总量:</b></td>
        <td th:text="${order.orderNum}"></td>
    </tr>
    <tr>
        <td><b>状态:</b></td>
        <td th:text="${order.status}==1?'正常':'撤销'"></td>
        <td><b>已上产线:</b></td>
        <td th:text="${order.confirm}?'是':'否'"></td>
        <td><b>生产总量:</b></td>
        <td th:text="${order.produceNum}"></td>
    </tr>
    <tr>
        <td><b>合同金额:</b></td>
        <td th:text="${order.contractAmount}/100"></td>
        <td><b>销售:</b></td>
        <td th:text="${order.createUser}"></td>
        <td><b>发送总量:</b></td>
        <td th:text="${order.sendNum}"></td>
    </tr>
    <tr>
        <td><b>实收金额:</b></td>
        <td th:text="${order.actualAmount}/100"></td>
        <td><b>创建时间:</b></td>
        <td th:text="${#dates.format(order.createTime,'yyyy-MM-dd')}"></td>
        <td><b>退货总量:</b></td>
        <td th:text="${order.refundNum}"></td>
    </tr>
</table>
<br/>

<table>
    <thead>
    <tr style="background-color: dimgrey;">
        <th>产品信息</th>
    </tr>
    <tr>
        <th>序号</th>
        <th>产品名称</th>
        <th>数量</th>
        <th>已产</th>
        <th>已发</th>
        <th>退货</th>
        <th>单价</th>
        <th>合计</th>
        <th>备注</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="item : ${batchList}">
        <td th:text="${itemStat.index+1}"></td>
        <td th:text="${item.productName}"></td>
        <td th:text="${item.orderNum}"></td>
        <td th:text="${item.produceNum}"></td>
        <td th:text="${item.sendNum}"></td>
        <td th:text="${item.refundNum}"></td>
        <td th:text="${item.price} / 100"></td>
        <td th:text="${item.amount} / 100"></td>
        <td th:text="${item.remark}"></td>
    </tr>
    </tbody>
</table>
<br/>

<div id="modal" class="modal" onclick="hide()"><img id="modal-image" class="modal-image"></div>
<table>
    <tr th:each="file : ${files}">
        <td><a th:href="@{'/file/img/'+${order.id}+'/'+${file.name}}" th:text="${file.name}" target="_blank"></a></td>
        <td>
            <img th:src="@{'/file/img/'+${order.id}+'/'+${file.name}}" style="height: 100px;" alt="pic" onclick="show(this)"/>
        </td>
    </tr>
</table>

<form th:action="@{/file/upload}" method="post" enctype="multipart/form-data" id="upload">
    <input type="number" name="orderId" th:value="${order.id}" hidden>
    <input type="file" name="file" id="file" style="border: 1px solid;">
    <input type="submit" value="上传">
</form>

<p>
    <a href="javascript:history.back(-1);">上一页</a>
    <a href="../index.html" th:href="@{/index.html}">首页</a>
</p>

<script>
    $("#upload").submit(function(e){
        e.preventDefault();

        $.ajax({
            type: $("#upload").attr("method"),
            url: $("#upload").attr("action"),
            data: new FormData($("#upload").get(0)),
            cache: false,
            processData: false,
            contentType: false,
            success: function(response){
                alert("提交成功");
                window.location.reload();
            },
            error: function(response){
                alert("提交失败");
            }
        });
    });

    $("#file").on("change", function(){
        var f = this.files[0];
        if (f.size > 1024*10000){
            alert("文件最大10M.")
        }
    });

    function show(image){
        $("#modal").css('display','block');
        $("#modal-image").attr('src', image.src);
    }

    function hide(){
        $("#modal").css('display','none');
    }
</script>
<style>
.modal{
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8)
}
.modal-image{
    display: block;
    max-width: 98%;
    max-height: 98%;
    margin: auto;
    margin-top: 2%;
}
</style>

</body>
</html>